<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="utf-8">
<title>递蓝科订餐系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<jsp:include page="/WEB-INF/views/inc/inc.jsp"></jsp:include>
</head>
<body style="zoom: 1;">
	<jsp:include page="/WEB-INF/views/inc/Header.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/views/inc/Inc01.jsp"></jsp:include>
	<div class="container" style="margin-top: 5px;">

		<div class="row border">
			<div class="col-xs-12 btn-group-xs"
				style="padding-left: 10px; padding-top: 5px; padding-bottom: 5px; border-bottom: solid 1px #ccc;">
				<button type="button" class="button bg-main button-small dialogs" data-toggle="click"  data-mask="1" data-width="20%"
					data-target="#addUserModal"><span class="icon-plus text-white"></span> 添加</button>
				<button type="button" class="button bg-main button-small" id="deleteBut" ><span class="icon-trash-o text-white"></span> 删除</button>
				<button type="button" class="button bg-main button-small dialogs" id="deleteHiddenBut" data-toggle="click"  data-mask="1" data-width="20%"
                    data-target="#delConfirmationModal" style="display: none;">删除</button>
			</div>
			<div class="col-xs-12 " style="margin: 0px;">
                <form action="DeleteUser.nut" method="post" id="tableForm">
				<table class="table table-striped">
					<thead>
						<tr>
							<th width="5%"></th>
							<th width="10%">用户名</th>
							<th width="15%">姓名</th>
							<th width="50%">部门</th>
							<th width="5%">余额</th>
							<th width="15%">操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="user" items="${obj}">
							<tr>
								<td>
								    <c:if test="${'admin' != user.userid}">
									    <label class="checkbox" for="checkbox1" style="margin: 5px;"> 
									       <input type="checkbox" name="userids" data-toggle="checkbox" value="${user.userid }">
										</label>
								    </c:if>
								</td>
								<td>${user.userid }</td>
								<td>${user.userName }</td>
								<td>${user.department }</td>
								<td>${user.balance }</td>
								<td>
								    <button type="button" buttype="update"
                                            class="button bg-sub  button-little radius-rounded" 
                                            data-toggle="click" data-mask="1" data-z-index="100" data-width="30%" data-target="#updateUserModal" 
                                            userid="${ user.userid}"><span class="icon-edit text-white"></span> 修改</button>
								    <c:if test="${'admin' != user.userid}">
										<button type="button" buttype="Recharge"
											class="button bg-sub  button-little radius-rounded"
											data-toggle="click" data-mask="1" data-z-index="100" data-width="30%" data-target="#userRechargeModal" 
											userid="${ user.userid}"><span class="icon-rmb (alias) text-white"></span> 充值</button>
									</c:if>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
                </form>
			</div>
		</div>
	</div>


	<!-- Add User Modal -->
	<div id="addUserModal" >
	   <div class="dialog fadein-top">
            <div class="dialog-head">
                <span class="close rotate-hover "></span>
                <strong>用户注册</strong>
            </div>
            <div class="dialog-body">
                <form action="UserRegist.nut" id="regsitUserForm" method="post">
                    <div class="form-inline">
                        <div class="input-group " style="margin: 10px 0px;">
                            <label class="addon">用户名：</label> 
                            <input type="text"
                                class="input radius-none" id="login-name" name="userid" />
                        </div>

                        <div class="input-group" style="margin: 10px 0px;">
                            <label class="addon">密　码：</label> 
                            <input
                                type="password" class="input radius-none" 
                                id="login-pass" name="passWord"/>
                        </div>
                        
                        <div class="input-group " style="margin: 10px 0px;">
                            <span class="addon">姓　名：</span> 
                            <input type="text"
                                class="input radius-none" id="login-username" name="userName"/>
                        </div>
                        
                        <div class="input-group" style="margin: 10px 0px;">
                            <span class="addon">部　门：</span>
                            <div>
                                <select id="basic"
                                    class="selectpicker show-tick input radius-none"
                                    data-live-search="true" name="department">
                                    <optgroup label="简洛" data-subtext="another test">
                                        <option value="总工办">总工办</option>
                                        <option value="开发一部">开发一部</option>
                                        <option value="开发二部">开发二部</option>
                                        <option value="开发三部">开发三部</option>
                                        <option value="开发四部">开发四部</option>
                                        <option value="解决方案">解决方案</option>
                                        <option value="运维支持部">运维支持部</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="dialog-foot">
                <button type="button" class="button dialog-close" data-dismiss="modal">关闭</button>
                <button type="button" id="userSubmitBut" class="button bg-green dialogs"  data-toggle="click"  
                data-mask="1" data-z-index="100" data-width="50%" data-target="#confirmationModal" >提交</button>
            </div>
		</div>
    </div>
	<!-- / Add User dialog -->
	
	<!-- Update User dialog -->
	<div id="updateUserModal">
		<div class="dialog fadein-top">
			<div class="dialog-head">
				<span class="close rotate-hover "></span>
                <strong>用户修改</strong>
			</div>
			<div class="dialog-body">
				<form action="UpdateUser.nut" id="updateUserForm" method="post">
					<div class="form-inline">
                        <div class="input-group " style="margin: 10px 0px;">
                            <label class="addon">用户名：</label> 
                            <input type="text"
                                class="input radius-none" id="login-name" name="userid" />
                            <input type="hidden"
                                class="input radius-none" id="login-id" name="id" />
                        </div>

                        <div class="input-group" style="margin: 10px 0px;">
                            <label class="addon">密　码：</label> 
                            <input
                                type="password" class="input radius-none" 
                                id="login-pass" name="passWord"/>
                        </div>
                        
                        <div class="input-group " style="margin: 10px 0px;">
                            <span class="addon">姓　名：</span> 
                            <input type="text"
                                class="input radius-none" id="login-username" name="userName"/>
                        </div>
                        
                        <div class="input-group" style="margin: 10px 0px;">
                            <span class="addon">部　门：</span>
                            <div>
                                <select id="basic"
                                    class="selectpicker show-tick input radius-none"
                                    data-live-search="true" name="department">
                                    <optgroup label="简洛" data-subtext="another test">
                                        <option value="总工办">总工办</option>
                                        <option value="开发一部">开发一部</option>
                                        <option value="开发二部">开发二部</option>
                                        <option value="开发三部">开发三部</option>
                                        <option value="开发四部">开发四部</option>
                                        <option value="解决方案">解决方案</option>
                                        <option value="运维支持部">运维支持部</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div>
				</form>
			</div>
			<div class="dialog-foot">
                <button type="button" class="button dialog-close" data-dismiss="modal">关闭</button>
                <button type="button" class="button bg-green dialogs" id="updateUserSubmitBut" data-toggle="click"  
                data-mask="1" data-z-index="100" data-width="50%" data-target="#confirmation" >提交</button>
            </div>
		</div>
	</div>

	<!-- / Update User dialog -->
	
	<!-- User Recharge Modal -->
	<div id="userRechargeModal">
		<div class="dialog fadein-top">
			<div class="dialog-head">
				<span class="close rotate-hover "></span>
                <strong>用户充值</strong>
			</div>
			<div class="dialog-body">
				<form action="UserRecharge.nut" id="UserRechargeForm" method="post">
					<div class="form-inline">
						<div class="input-group " style="margin: 10px 0px;">
							<label class="addon">用 户 名：</label> 
							<input type="text"
								class="input radius-none" id="login-name" name="userid" />
							<input type="hidden" id="id" name="id"/>
						</div>

						<div class="input-group" style="margin: 10px 0px;">
							<label class="addon">充值金额：</label> 
							<input type="text"
                                   class="input radius-none" id="login-name" name="rechargeAmount" />
						</div>
					</div>
				</form>
			</div>
			<div class="dialog-foot">
                <button type="button" class="button dialog-close" data-dismiss="modal">关闭</button>
                <button type="button" class="button bg-green dialogs" id="userRechargeSubmitBut" data-toggle="click"  
                data-mask="1" data-z-index="100" data-width="50%" data-target="#confirmation" >提交</button>
            </div>
		</div>
	</div>

	<!-- / User Recharge Modal -->
	
	<!-- confirmation Modal -->
	<div id="confirmationModal">
		<div class="dialog fadein-top">
			<div class="dialog-head">
				<span class="close rotate-hover "></span>
                <strong>确认提交</strong>
			</div>
			<div class="dialog-body">
			请确认是否提交表单
			</div>
			<div class="dialog-foot">
				<button type="button" class="button dialog-close" data-dismiss="modal">关闭</button>
                <button type="button" class="button bg-green dialogs" id="confirmationModalSubmitBut" data-toggle="click"  
                data-mask="1" data-z-index="100" data-width="50%" data-target="#confirmation" >提交</button>
			</div>
		</div>
	</div>
	<!-- / confirmation Modal -->
	
	<!-- Delete User Confirmation Modal -->
	<div id="delConfirmationModal">
		 <div class="dialog fadein-top">
            <div class="dialog-head">
				<span class="close rotate-hover "></span>
                <strong>确认删除</strong>
			</div>
			<div class="dialog-body">
			请确认是否已选用户？
			</div>
			<div class="dialog-foot">
				<button type="button" class="button dialog-close" data-dismiss="modal">关闭</button>
                <button type="button" class="button bg-green " id="confDelUserBut" >提交</button>
			</div>
	   </div>
	</div>
	<!-- / Delete User Confirmation Modal -->
	<script type="text/javascript">
	$(function(){
		
		function checkForm(obj, userid, passWord, userName, department){
			if (userid == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-warning alert-dismissible\" role=\"alert\">";
                alertMess += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>";
                alertMess += "<strong>警告!</strong>用户名不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
             if (passWord == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-warning alert-dismissible\" role=\"alert\">";
                alertMess += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>";
                alertMess += "<strong>警告!</strong>密码不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
            if (userName == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-warning alert-dismissible\" role=\"alert\">";
                alertMess += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>";
                alertMess += "<strong>警告!</strong>姓名不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
            if (department == "") {
                var alertMess ="<div name=\"alertMessage\" class=\"alert alert-warning alert-dismissible\" role=\"alert\">";
                alertMess += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>";
                alertMess += "<strong>警告!</strong>部门不能为空.";
                alertMess += "</div>";
                $('div[name="alertMessage"]').remove()
                $(alertMess).insertBefore(obj);
                return false;
            }
			return true;
		}
		
		$("#userSubmitBut").click(function(){
			var userid = $("#addUserModal input[name='userid']").val();
			var passWord = $("#addUserModal input[name='passWord']").val();
			var userName = $("#addUserModal input[name='userName']").val();
			var department = $("#addUserModal input[name='department']").val();
			
			if (!checkForm("#userSubmitBut", userid, passWord, userName, department)) {
				return;
			}
			
			$.getJSON("checkUserExists.nut", {"userid":userid}, function(data){
				if ("0" == data.message){
					var alertMess ="<div name=\"alertMessage\" class=\"alert alert-warning alert-dismissible\" role=\"alert\">";
					alertMess += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>";
					alertMess += "<strong>警告!</strong>用户已存在.";
					alertMess += "</div>";
					$('div[name="alertMessage"]').remove()
					$(alertMess).insertBefore("#userSubmitBut");
// 					$(".login-form").append(alert);
				} else {
					$('div[name="alertMessage"]').remove()
					$('#regsitUserForm').submit();
				}
			});
		});
		
		$("#updateUserSubmitBut").click(function(){
			var userid = $("#updateUserModal input[name='userid']").val();
            var passWord = $("#updateUserModal input[name='passWord']").val();
            var userName = $("#updateUserModal input[name='userName']").val();
            var department = $("#updateUserModal input[name='department']").val();
            if (!checkForm("#updateUserSubmitBut", userid, passWord, userName, department)) {
                return;
            }
            
            $('div[name="alertMessage"]').remove()
//             $("#confirmationModal").modal();
            $('#updateUserForm').submit();
		});
		
		// 点击更新按钮
		$("button[buttype='update']").click(function(){
			var e = $(this);
			var userid = $(this).attr("userid");
			$.getJSON("InitUserUpdate.nut", {"userid":userid}, function(data){
				$("#updateUserModal input[name='id']").val(data.message.id);
				$("#updateUserModal input[name='userid']").val(data.message.userid);
				$("#updateUserModal input[name='userid']").attr("readonly", "readonly");
	            $("#updateUserModal input[name='passWord']").val(data.message.passWord);
	            $("#updateUserModal input[name='userName']").val(data.message.userName);
	            $("#updateUserModal input[name='department']").val(data.message.department);
	            $("#updateUserModal input[name='department']").find("option[value='" + data.message.department +"']").attr("selected","selected");
// 	            $("#updateUserModal").modal();
	            $showdialogs(e);
            });
		});
		
		// 点击充值按钮
		$("button[buttype='Recharge']").click(function(){
			var userid = $(this).attr("userid");
			var e = $(this);
			$.getJSON("InitUserUpdate.nut", {"userid":userid}, function(data){
				$("#userRechargeModal input[name='id']").val(data.message.id);
				$("#userRechargeModal input[name='userid']").val(data.message.userid);
				$("#userRechargeModal input[name='userid']").attr("readonly", "readonly");
				$("#userRechargeModal input[name='userRechargeModal']").val(data.message.balance);
// 	            $("#userRechargeModal").modal();
	            $showdialogs(e);
            });
		});
		
		// 用户充值提交按钮
		$("#userRechargeSubmitBut").click(function(){
			var userid = $("#userRechargeModal input[name='userid']").val();
            var passWord = $("#userRechargeModal input[name='rechargeAmount']").val();
            
            $('div[name="alertMessage"]').remove()
//             $("#confirmationModal").modal();
            $('#UserRechargeForm').submit();
		});
		
		// 删除按钮
		$("#deleteBut").click(function(){
			var str="";
			var userid = $("input[name='userids']:checked");
			if(userid.length > 0){
	            $("#deleteHiddenBut").click();
			}
		});
		
		// 确认删除按钮
		$("#confDelUserBut").click(function(){
            $('#tableForm').submit();
		});
		
	});
	
	</script>
</body>
</html>